<template>
  <!-- <div class="section com-route">
    <h3 class="section-title text-center">{{title}}相关航线</h3>
    <div class="wrapper wrapper-fixed">
      <ul class="route-list">
        <li class="item" v-for="item in routes">
          <nuxt-link :to="/route/+item.id" class="item-img img-link zoom-box"><img :src="item.route_icon" alt=""></nuxt-link>
          <div class="text-area">
            <div class="text-area-inner">
              <h3 class="title"><nuxt-link :to="/route/+item.id">{{item.title}}</nuxt-link></h3>
              <div class="describe" v-html="item.content"></div>
              <div class="tags">
                <p class="tag tag-clock">{{item.days}}</p>
                <p class="tag tag-address">{{item.departure}}起航 — 抵达{{item.destination}}</p>
              </div>
              <p class="text-right link-box"><nuxt-link :to="/route/+item.id" class="btn-icon-o"><i class="fa fa-angle-right"></i></nuxt-link></p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div> -->
  <div class="exp-short-content">
    <div class="wrapper wrapper-fixed">
      <ul class="exp-list clear-float">
        <li class="item" v-for="(item, index) in experience" :key="index">
            <div class="img-box">
                <nuxt-link :to="/experience/+item.id"><img :src="item.thumbnail" alt=""></nuxt-link>
                <button class="btn btn-thumb" :data-likeid="item.id"><i class="iconfont icon-fabulous"></i></button>
            </div>
            <div class="text-area text-center">
                <h3 class="item-title"><nuxt-link :to="/experience/+item.id">{{item.title}}</nuxt-link></h3>
                <p class="excerpt">{{item.excerpt}}</p>
                <p class="tags">
                    <span class="tag"><i class="iconfont icon-rili"></i>{{item.timespan}}</span>
                    <span class="tag"><i class="iconfont icon-clock"></i>{{item.duration}}</span>
                </p>
                <p class="text-center"><nuxt-link class="link" :to="/experience/+item.id">了解详情</nuxt-link></p>
            </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default{
  props: {
    experience: Array
  }
}
</script>
<style lang="less" scoped>
@import "~assets/css/variable.less";
@import "~assets/css/mixins.less";

// 体验列表
.exp-list{
	.img-link{display:block;}
	//点赞按钮
	.btn-thumb{
		padding:0.2em 0.8em;
		color:#fff;
		font-size:30px;
		line-height:1;
		border:0;
		i{font-size:30px;}
		.border-radius(2em);
		background-color:rgba(0, 0, 0, 0.3);
		.thumb-num{padding-left:0.2em;}
		&:hover,&.active{
			color:#fff;
			background-color:@red;
		}
		@media screen and (max-width:1270px){
			font-size:28px;
			i{font-size:28px;}
		}
		@media screen and (max-width:1024px){
			font-size:24px;
			i{font-size:24px;}
		}
		@media screen and (max-width:768px){
			font-size:22px;
			i{font-size:22px;}
		}
	}
	margin-left:-15px;
	margin-right:-15px;
	.item{
		width:100%/2;
		padding:0 15px;
		float:left;
		margin-bottom:60px;
		.img-box{
			position:relative;
			.btn-thumb{
				position:absolute;
				top:20px;
				right:20px;
				z-index:9;
			}
		}
		.text-area{
			width:430/570*100%;
			margin-left:auto;
			margin-right:auto;
			padding:30px;
			background-color: #fff;
			box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);
			margin-top:-70px;
			position:relative;
			z-index:9;
			.item-title{
				font-size:28px;
				font-weight:normal;
				margin-bottom:0.5em;
				.text-overflow;
			}
			p{
				font-size:16px;
				color:#666;
			}
			.excerpt{line-height:1.5; .text-overflow-lines(@line-num:3, @line-height:1.5em)}
			.tags{
				font-size:14px;
				padding:1em 0;
				i{font-size:18px; padding-right:0.2em;}
				.tag{padding-right:0.5em;}
			}
			.link{
				display:inline-block;
				padding:0.5em 2em;
				color:#fff;
				font-size:16px;
				background-color:@red;
				&:hover{
					text-decoration:none;
					background-color:darken(@red, 5%);
				}
			}
		}
	}
	@media screen and (max-width:1270px){
		.item{
			margin-bottom:50px;
			.text-area{
				width:430/570*100%;
				margin-top:-50px;
				.item-title{font-size:26px;}
				p{font-size:16px;}
			}
		}
	}
	@media screen and (max-width:1024px){
		margin-left:-10px;
		margin-right:-10px;
		.item{
			margin-bottom:40px;
			padding:0 10px;
			.img-box{
				.btn-thumb{
					top:15px;
					right:15px;
				}
			}
			.text-area{
				width:430/570*100%;
				margin-top:-50px;
				.item-title{font-size:24px;}
				p{font-size:14px;}
				.link{font-size:14px;}
				.tags{
					.tag{display:block; margin-bottom:0.5em;}
				}
			}
		}
	}
	@media screen and (max-width:768px){
		.item{
			margin-bottom:40px;
			padding:0 10px;
			.img-box{
				.btn-thumb{
					top:10px;
					right:10px;
				}
			}
			.text-area{width:500/570*100%;}
		}
	}
	@media screen and (max-width:640px){
		margin-left:0;
		margin-right:0;
		.item{
			width:100%;
			padding:0;
			.img-link{img{width:100%; max-width:auto;}}
			.text-area{
				width:500/570*100%;
				.item-title{font-size:22px;}
				.tags{margin-bottom:0;}
				.excerpt{margin-bottom:0; .text-overflow-lines(@line-num:2, @line-height:1.5em)}
			}
		}
	}
}

</style>



